window.onload = function () {
  let loc = window.location.search;
  let n1 = loc.length; //地址的总长度
  let n2 = loc.indexOf("="); //取得=号的位置
  let idVal = +decodeURI(loc.substr(n2 + 1, n1 - n2)); //从=号后面的内容
  let goodsName;
  let categoryId = 0;
  if (!isNaN(idVal)) {
    categoryId = idVal;
  } else {
    goodsName = decodeURI(loc.substr(n2 + 1, n1 - n2));
  }

  const ul = document.querySelector(".section3Ul");
  let newArr = [];
  const noData = document.querySelector(".noData");
  const searchInput = document.querySelector(".searchCont p");
  if (goodsName) searchInput.innerHTML = goodsName.substring(0, 2);

  //获取数据
  function getData(
    categoryId = "0",
    sortType,
    sortPrice,
    goodsName = "",
    page = 1
  ) {
    axios
      .get("goods/list", {
        params: { sortType, sortPrice, categoryId, goodsName, page },
      })
      .then((res) => {
        console.log(categoryId);
        if (res.status === 200) {
          let {
            data: {
              data: {
                list: { data },
              },
            },
          } = res;
          render(data);
        }
      });
  }
  getData(categoryId, "all", "0", goodsName, 1);

  //渲染数据
  function render(arr) {
    if (arr.length < 1) {
      noData.style.display = "block";
    }
    ul.innerHTML = arr
      .map((item) => {
        const {
          goods_name,
          goods_id,
          goods_image,
          goods_sales,
          goods_price_max,
          line_price_min,
        } = item;
        return `
        <li>
          <a href="detail.html?goodsId=${goods_id}">
            <img src="${goods_image}" alt="" />
            <div class="goodCont">
              <h3>${goods_name}</h3>
              <p class="selled">已售${goods_sales}件</p>
              <p class="price">￥${goods_price_max} <span>￥${line_price_min}</span></p>
            </div>
          </a>
        </li>
      `;
      })
      .join("");
  }

  //点击筛选商品
  const listContTop = document.querySelector(".listContTop");
  const lis = document.querySelectorAll(".listContTopLi1");
  let flag = true;
  const elI = document.querySelectorAll(".listContTopPrice i");

  document.querySelector(".listContTopPrice .cur").classList.remove("cur");

  //点击
  listContTop.addEventListener("click", function (e) {
    let target = e.target;
    if (target.tagName === "A") {
      listContTop.querySelector(".cur").classList.remove("cur");

      let isActive = document.querySelector(".listContTopPrice .cur");
      isActive && isActive.classList.remove("cur");

      target.parentNode.classList.add("cur");
      let id = +target.dataset.index;
      if (id == 0) {
        getData(categoryId, "all", 0, goodsName);
      } else if (id == 1) {
        getData(categoryId, "sales", 0, goodsName);
      } else if (id == 2) {
        if (flag) {
          getData(categoryId, "price", "0", goodsName);
          elI[0].classList.add("cur");
          elI[1].classList.remove("cur");
          flag = false;
        } else {
          //console.log(12);
          elI[0].classList.remove("cur");
          elI[1].classList.add("cur");
          getData(categoryId, "price", "1", goodsName);
          flag = true;
        }
      }
    }
  });

  //点击切换商品展示样式
  const icon = document.querySelector(".search span");
  let flag1 = true;
  icon.addEventListener("click", function () {
    if (flag1) {
      this.className = "iconfont icon-liebiaopailie";
      ul.classList.add("cur");
    } else {
      this.className = "iconfont icon-pailie";
      ul.classList.remove("cur");
    }
    flag1 = !flag1;
  });
};
